<template>
    <div class="root">
        <div class="left">
            <SideBar />

        </div>
        <div class="right">
            <div class="right-top">
                <el-descriptions title="基本信息" border>
                    <el-descriptions-item :rowspan="3" :width="140" label="Photo" align="center">
                        <el-image style="width: 100px; height: 100px"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </el-descriptions-item>
                    <el-descriptions-item label="姓名">{{ userStore.user.name }}</el-descriptions-item>
                    <el-descriptions-item label="email">{{ userStore.user.email }}</el-descriptions-item>
                    <el-descriptions-item label="身份">{{ roleName }}</el-descriptions-item>
                    <el-descriptions-item label="班级号" v-if="[1, 2].includes(userStore.user.roleId)">
                        <el-tag size="small">{{ userStore.user.classId }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="班主任" v-if="userStore.user.id == 1">
                        <el-tag size="small">{{ headTeacherName }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="辅导员" v-if="userStore.user.id == 1">
                        <el-tag size="small">{{ counselorName }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="right-bottom">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import SideBar from '../components/SideBar.vue';
import { useUserStore } from '../store/user';
const userStore = useUserStore();
const roleName = ref("");
import axios from '../utils/http.ts';

// 判断学生身份
const judgeRole = (roleId) => {
    if (roleId == 1) {
        roleName.value = "学生";
    }
    if (roleId == 2) {
        roleName.value = "班主任";
    }
    if (roleId == 3) {
        roleName.value = "辅导员";
    }
    if (roleId == 4) {
        roleName.value = "管理员";
    }
}

const getNameById = async (id) => {
    const res = await axios.get(`/user/getTeacherNameById/${id}`);
    if (res.success) {
        return res.result;
    }
}
const headTeacherName = ref("");
const counselorName = ref("");
onMounted(() => {
    if (userStore.user) {
        judgeRole(userStore.user.roleId);


        if (userStore.user.roleId == 1) {
            getNameById(userStore.user.headTeacherId).then(res => {
                headTeacherName.value = res
            })
            getNameById(userStore.user.counselorId).then(res => {
                counselorName.value = res
            })
        }
    }
})
</script>

<style lang="scss" scoped>
.root {
    display: flex;
    height: 100vh;
    width: 100vw;
    // background-color: aliceblue;
    background: var(--el-menu-hover-bg-color);
    padding: 20px;

    .left {
        min-width: 200px;
        border-radius: 16px;
        overflow: hidden;
        // border-right: 1px solid var(--el-border-color);
        // box-shadow: 0px 10px 10px 10px rgba(218, 218, 219, 0.747);
        background-color: #ffffff;
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 20px;


        .right-top {
            // height: 200px;
            // width: 50%;
            padding: 20px;
            // background-color: aliceblue;
            background-color: #ffffff;
            border-radius: 16px;
            // box-shadow: 0px 10px 10px 10px rgb(240, 240, 240);
        }

        .right-bottom {
            margin-top: 20px;
            flex: 1;
            // border-top: 1px solid var(--el-border-color);
            border-radius: 12px 0 0 0;
            background-color: #ffffff;
            border-radius: 16px;
        }
    }

}
</style>